<script setup lang="ts">
import { computed, ref } from 'vue'
import { message } from 'ant-design-vue'
const friendSearchText = ref('')
import Request from '@/api/axios'
import { SearchOutlined } from '@ant-design/icons-vue'
const { id, visible } = defineProps(['id', 'visible'])

const emit = defineEmits(['update:visible'])
const QueryFriendList = ref<any>([])
const handleFriendKeyChange = async () => {
    if (!friendSearchText.value.trim()) return
    QueryFriendList.value = []
    await Request.get({ url: `/user/search?keyword=${friendSearchText.value}` }).then((res) => {
        QueryFriendList.value = res.info
    })
}
const handleAddFriend = async (recipient) => {
    if (!recipient.trim()) {
        message.warning('请输入对方用户ID或账户')
        return
    }

    await Request.post({
        url: '/user/add',
        data: {
            recipient: recipient,
            verification: "你好, 我是" + id.value + "，很高兴认识你！"
        }
    }).then((res) => {
        if (res.code === 200) {
            message.success('好友请求已发送')
        } else {
            message.error(res.msg || '好友申请失败')
        }
    })
}
const local_visible = computed({
    get: () => visible,
    set: (val) => emit('update:visible', val)
})
</script>

<template>
    <a-modal v-model:visible="local_visible" title="添加好友" :keyboard="false" :maskClosable="false">
        <a-input v-model:value="friendSearchText" placeholder="请输入对方用户ID/账户" allow-clear @change="handleFriendKeyChange"
            @pressEnter="handleAddFriend">
            <template #addonBefore>
                <SearchOutlined />
            </template>
        </a-input>
        <div class="friend-list">
            <div v-for="(item, index) in QueryFriendList" :key="index" class="friend-item">
                <div class="friend-info">
                    <a-avatar
                        :src="item.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                    <div class="friend-meta">
                        <div class="friend-name">{{ item.username }}</div>
                        <div class="friend-id">ID: {{ item.id }}</div>
                        <div v-if="item.introduction" class="friend-introduction">{{ item.introduction }}</div>
                    </div>
                </div>
                <a-button type="primary" size="small" @click="() => handleAddFriend(item.id)" class="add-btn">
                    <template #icon>
                        <UserAddOutlined />
                    </template>
                    添加好友
                </a-button>
            </div>
        </div>
    </a-modal>
</template>

<style scoped>
.friend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* transition: all 0.3s ease; */
}

/* .friend-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
} */

.friend-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

.friend-meta {
    display: flex;
    flex-direction: column;
}

.friend-name {
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
    font-weight: 500;
}

.friend-id {
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
}

.friend-introduction {
    color: rgba(0, 0, 0, 0.7);
    font-size: 12px;
    margin-top: 4px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-btn {
    background: linear-gradient(45deg, #1d90f5, #6dd5fa);
    border: none;
    border-radius: 15px;
    padding: 0 20px;
    transition: all 0.3s ease;
}

.add-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(29, 144, 245, 0.4);
}
</style>